<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>致世界上最爱我的男人父亲节快乐</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		
	</head>
	<body>
		
		<div class="web">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					
					<!--第一页-->
					<div class="swiper-slide page page1">
						<!--标题-->
						<div class="biao_ti ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="600ms">
							<h1 class="ani h1" swiper-animate-effect="tada" swiper-animate-duration="1.5s" swiper-animate-delay="400ms">父亲节</h1>
						</div>
						
						<div class="music">
							<a>音乐</a>
							<audio class="ani infinite" swiper-animate-effect="flash" swiper-animate-duration="2.5s" src="audio/bgmucis.mp3" autoplay="autoplay" preload loop controls=""></audio>
						</div>
						
						<p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2.5s" swiper-animate-delay="1s">最伟大的爱莫过于父爱</p>
						<p class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2.8s"  swiper-animate-delay="2s">它是一片汪洋的大海，浓郁而深远</p>
						<p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s" swiper-animate-delay="3s">它是一片大海让你的灵魂即使遇到电闪雷鸣依然仁厚宽容</p>
						<p class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="3.2s" swiper-animate-delay="4s">它是一缕阳光让你的心灵即使在寒冷的冬天也能感到温暖如春</p>
						
						<div class="ani kuang" swiper-animate-effect="zoomInUp" swiper-animate-duration="3s">
							<div class="bg-tp ani" swiper-animate-effect="tada" swiper-animate-duration="3s">
								<span class="ani">致：</span>
								<p  class="ani infinite" swiper-animate-effect="shake" swiper-animate-duration="5s">这世界上<br />最爱我的<br />男人</p>
							</div>
						</div>
						<div class="line ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="8.5s">
							
						</div>
						
						<div class="left" >
							<p class="ani" swiper-animate-effect="zoomInRight" swiper-animate-duration="10s">肩负如山，胸襟似海，立地顶天男子汉；</p>
						</div>
						
						<div class="line2 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="8.5s">
							
						</div>
						<div class="right">
							<p class="ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="10s">鬓弯成月，眉叶怀秋，含辛茹苦老人家！</p>
						</div>
						
						<div class="borderBox">
							<div id="gif" class="ani" swiper-animate-effect="zoomInUp" swiper-animate-duration="5.5s">
								<img src="http://img.mp.itc.cn/upload/20160618/a20080c3b4cd46d8acc7be0d4228614a_th.jpg"/>
							</div>
						</div>
						
					</div>
					
					<!--第二页-->
					<div class="swiper-slide page page2">
						<h1 class="ani infinite" swiper-animate-effect="tada" swiper-animate-duration="3s">父爱</h1>
						<div class="two-page ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s">
							<img src="img/timg3.jpg"/>
						</div>
						
						<div class="two-p ani" swiper-animate-effect="rubberBand" swiper-animate-duration="3s">
							<p class="p1" >在我执拗那几年</p>
							<p class="p2 " swiper-animate-delay="4s">你包容我的任性</p>
							<p class="p3 " swiper-animate-delay="6s">扬起的巴掌</p>
							<p class="p4 " swiper-animate-delay="8s">却始终落不下去</p>
						</div>
						
						
						<div class="two-tp ani" swiper-animate-effect="zoomInUp" swiper-animate-duration="4s" swiper-animate-delay="400ms">
							<img src="img/timg4.jpg"/>
						</div>
						<p class="p5 ani" swiper-animate-effect="rubberBand" swiper-animate-duration="7s" swiper-animate-delay="4s">您的前半生我无法参与</p>
						
						<p class="p6 ani" swiper-animate-effect="rubberBand" swiper-animate-duration="7s" swiper-animate-delay="4s">您的后半生我奉陪到底</p>
					</div>
					
					<!--第三页-->
					<div class="swiper-slide page page3">
						<h1 class="ani infinite" swiper-animate-duration="6s" swiper-animate-delay="4s">害怕您老了</h1>
						<div class="feng_che ani" >
							<img class="ani"  swiper-animate-effect="zoomInDown" swiper-animate-duration="5s" src="img/fengche.jpg"/>
							<img class="ani img-fc" src="img/fengche.png"/>
						</div>
						
						<p class="ani p7" swiper-animate-effect="zoomInRight" swiper-animate-duration="5s" swiper-animate-delay="4s">您渐渐老了</p>
						<p class="ani p8" swiper-animate-effect="zoomInLeft" swiper-animate-duration="5s" swiper-animate-delay="5.5s">是什么时候老了？</p>
						<p class="ani p9" swiper-animate-effect="zoomInRight" swiper-animate-duration="5s" swiper-animate-delay="7s">眼睛变花了</p>
						<p class="ani p10" swiper-animate-effect="zoomInLeft" swiper-animate-duration="5s" swiper-animate-delay="8.5s">背也变驼了</p>
						<p class="ani p11" swiper-animate-effect="zoomInRight" swiper-animate-duration="5s" swiper-animate-delay="10s">我长大了</p>
						<p class="ani p12" swiper-animate-effect="zoomInLeft" swiper-animate-duration="5s" swiper-animate-delay="11.5s">您却已两鬓斑白……</p>
						
						<div class="divbox ani" swiper-animate-effect="rollIn" swiper-animate-duration="5s" swiper-animate-delay="14s">
							
						</div>
						<p class="ani p13" swiper-animate-duration="5s" swiper-animate-delay="16s">&nbsp;致世界上最爱我的男人父亲节快乐</p>
					</div>
					
					
					<div class="swiper-slide page page1">
						<!--标题-->
						<div class="biao_ti ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="600ms">
							<h1 class="ani h1" swiper-animate-effect="tada" swiper-animate-duration="1.5s" swiper-animate-delay="400ms">父亲节</h1>
						</div>
						
						<div class="music">
							<a>音乐</a>
							<audio class="ani infinite" swiper-animate-effect="flash" swiper-animate-duration="2.5s" src="audio/bgmucis.mp3" autoplay="autoplay" preload loop controls=""></audio>
						</div>
						
						<p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2.5s" swiper-animate-delay="1s">最伟大的爱莫过于父爱</p>
						<p class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2.8s"  swiper-animate-delay="2s">它是一片汪洋的大海，浓郁而深远</p>
						<p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s" swiper-animate-delay="3s">它是一片大海让你的灵魂即使遇到电闪雷鸣依然仁厚宽容</p>
						<p class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="3.2s" swiper-animate-delay="4s">它是一缕阳光让你的心灵即使在寒冷的冬天也能感到温暖如春</p>
						
						<div class="ani kuang" swiper-animate-effect="zoomInUp" swiper-animate-duration="3s">
							<div class="bg-tp ani" swiper-animate-effect="tada" swiper-animate-duration="3s">
								<span class="ani">致：</span>
								<p  class="ani infinite" swiper-animate-effect="shake" swiper-animate-duration="5s">这世界上<br />最爱我的<br />男人</p>
							</div>
						</div>
						<div class="line ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="8.5s">
							
						</div>
						
						<div class="left" >
							<p class="ani" swiper-animate-effect="zoomInRight" swiper-animate-duration="10s">肩负如山，胸襟似海，立地顶天男子汉；</p>
						</div>
						
						<div class="line2 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="8.5s">
							
						</div>
						<div class="right">
							<p class="ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="10s">鬓弯成月，眉叶怀秋，含辛茹苦老人家！</p>
						</div>
						
						<div class="borderBox">
							<div id="gif" class="ani" swiper-animate-effect="zoomInUp" swiper-animate-duration="5.5s">
								<img src="http://img.mp.itc.cn/upload/20160618/a20080c3b4cd46d8acc7be0d4228614a_th.jpg"/>
							</div>
						</div>
						
					</div>
					
					<!--第二页-->
					<div class="swiper-slide page page2">
						<h1 class="ani infinite" swiper-animate-effect="tada" swiper-animate-duration="3s">父爱</h1>
						<div class="two-page ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s">
							<img src="img/timg3.jpg"/>
						</div>
						
						<div class="two-p ani" swiper-animate-effect="rubberBand" swiper-animate-duration="3s">
							<p class="p1" >在我执拗那几年</p>
							<p class="p2 " swiper-animate-delay="4s">你包容我的任性</p>
							<p class="p3 " swiper-animate-delay="6s">扬起的巴掌</p>
							<p class="p4 " swiper-animate-delay="8s">却始终落不下去</p>
						</div>
						
						
						<div class="two-tp ani" swiper-animate-effect="zoomInUp" swiper-animate-duration="4s" swiper-animate-delay="400ms">
							<img src="img/timg4.jpg"/>
						</div>
						<p class="p5 ani" swiper-animate-effect="rubberBand" swiper-animate-duration="7s" swiper-animate-delay="4s">您的前半生我无法参与</p>
						
						<p class="p6 ani" swiper-animate-effect="rubberBand" swiper-animate-duration="7s" swiper-animate-delay="4s">您的后半生我奉陪到底</p>
					</div>
					
					<div class="swiper-slide page page3">
						<h1 class="ani infinite" swiper-animate-duration="6s" swiper-animate-delay="4s">害怕您老了</h1>
						<div class="feng_che ani" >
							<img class="ani"  swiper-animate-effect="zoomInDown" swiper-animate-duration="5s" src="img/fengche.jpg"/>
							<img class="ani img-fc" src="img/fengche.png"/>
						</div>
						
						<p class="ani p7" swiper-animate-effect="zoomInRight" swiper-animate-duration="5s" swiper-animate-delay="4s">您渐渐老了</p>
						<p class="ani p8" swiper-animate-effect="zoomInLeft" swiper-animate-duration="5s" swiper-animate-delay="5.5s">是什么时候老了？</p>
						<p class="ani p9" swiper-animate-effect="zoomInRight" swiper-animate-duration="5s" swiper-animate-delay="7s">眼睛变花了</p>
						<p class="ani p10" swiper-animate-effect="zoomInLeft" swiper-animate-duration="5s" swiper-animate-delay="8.5s">背也变驼了</p>
						<p class="ani p11" swiper-animate-effect="zoomInRight" swiper-animate-duration="5s" swiper-animate-delay="10s">我长大了</p>
						<p class="ani p12" swiper-animate-effect="zoomInLeft" swiper-animate-duration="5s" swiper-animate-delay="11.5s">您却已两鬓斑白……</p>
						
						<div class="divbox ani" swiper-animate-effect="rollIn" swiper-animate-duration="5s" swiper-animate-delay="14s">
							
						</div>
						<p class="ani p13" swiper-animate-duration="5s" swiper-animate-delay="16s">&nbsp;致世界上最爱我的男人父亲节快乐</p>
					</div>
				</div>
			</div>

		</div>
		
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js"></script>
		<!--引入swiper的animate脚本-->
		<script src="js/swiper.animate1.0.2.min.js" type="text/javascript"></script>

		<script type="text/javascript">
				document.body.style.height = window.innerHeight + "px";
				/*动态改变根元素字体大小*/
				function recalc() {
					var clientWidth = document.documentElement.clientWidth;
					if(!clientWidth) return;
					document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
				}
				//字体大小 = 1rem单表示了多少个像素*设备的宽度

				function initRecalc() {
					recalc();
					var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
					if(!document.addEventListener) return;
					window.addEventListener(resizeEvt, recalc, false);
					document.addEventListener('DOMContentLoaded', recalc, false);
				}
				initRecalc();
			</script>

		<script>
			
			document.body.style.height = window.innerHeight + "px";
			
			var swiper = new Swiper('.swiper-container', {
			direction: 'vertical',//垂直滑动
			//direction:'horizontal'，//水平滑动

				onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
					swiperAnimateCache(swiper); //隐藏动画元素 
					swiperAnimate(swiper); //初始化完成开始动画
				},
				onSlideChangeEnd: function(swiper) {
					swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				}
			})
		</script>
</html>
